<template>
	<div id="classify" class="container">
		<h2>鼠标悬停状态表格</h2>
		<p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：</p>            
		<table class="table table-hover">
			<thead>
			  <tr>
				<th>Firstname</th>
				<th>Lastname</th>
				<th>Email</th>
			  </tr>
			</thead>
			<tbody>
			  <tr>
				<td>John</td>
				<td>Doe</td>
				<td>john@example.com</td>
			  </tr>
			  <tr>
				<td>Mary</td>
				<td>Moe</td>
				<td>mary@example.com</td>
			  </tr>
			  <tr>
				<td>July</td>
				<td>Dooley</td>
				<td>july@example.com</td>
			  </tr>
			</tbody>
		</table>
		<div>
			<h2>当前页页码状态</h2>
			<p>当前页可以使用 .active 类来高亮显示：</p>                  
			<ul class="pagination">
				<li class="page-item"><a class="page-link">Previous</a></li>
				<li class="page-item" v-for="(item,index) in classifys" :class="{active:index==pages}" @click="goIndex(index)">
					<a class="page-link">{{ item.page }}</a>
				</li>
				<li class="page-item"><a class="page-link">Next</a></li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'classify',
		data(){
			return{
				classifys: [
					{
						page: '1',
						id: '1'
					},
					{
						page: '2',
						id: '2'
					},
					{
						page: '3',
						id: '3'
					}
				],
				pages: 0
			}
		},
		methods: {
			goIndex (index){
				this.pages = index;
				this.$router.push({path: '/index',query: {classify: "我是分类跳过来的"}})

			}
		}
	}
</script>

<style>
	#classify{
		padding: 50px 0;
	}
</style>